<template>
  <div class="box">
    <!-- <joint-selection :JointSelection="JointSelection" @guanbi="pingguanbi($event)"></joint-selection> -->
    <el-drawer title="我是添加机构" class="drawerScroll" :visible.sync="ruleForm.increased2" :with-header="false" :wrapperClosable="false">
      <div class="addUer_title">
        <span>{{ ruleForm.title2 }}</span>
        <i class="el-icon-close addUer_icon" @click="offDrawer('ruleForm')"></i>
      </div>
      <el-form :model="ruleForm" class="drawerContent" :rules="rules" ref="ruleForm" label-width="130px">
        <el-row>
          <el-col :span="23">
            <el-form-item label="机构名称：" prop="jgmc2">
              <el-input v-model.trim="ruleForm.jgmc2" clearable placeholder="机构名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="机构类型：" prop="jglx2">
              <el-select v-model.trim="ruleForm.jglx2" collapse-tags multiple :no-data-text="tiText1" clearable placeholder="机构类型" class="select_width">
                <el-option v-for="item in optionsjglx" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="机构联系人：" prop="lxr2">
              <el-input v-model.trim="ruleForm.lxr2" clearable placeholder="机构联系人" class="select_width"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="机构联系电话：" prop="lxrdh2">
              <el-input v-model.trim="ruleForm.lxrdh2" clearable placeholder="填写联系电话" class="select_width"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="机构地址：">
              <!-- <el-cascader
                v-show="showcity"
                v-model="ruleForm.selectArea2"
                ref="cascaderList"
                class="select_width2"
                style="margin-right: 10px"
                clearable
                @change="handleChange"
                @visible-change="visibleChange"
                :props="{
                  lazy: true,
                  lazyLoad: lazyLoadAdd,
                }"
              ></el-cascader>-->
              <!-- <el-input
                v-show="ruleForm.title2 !== '添加机构' ? true : false"
                v-model.trim="xianxidizhi"
                disabled
                placeholder="辖区(安装地址)"
              ></el-input>-->
              <!-- <el-input
                v-show="!showcity"
                v-model.trim="ruleForm.city2"
                class="select_width2"
                disabled
                style="margin-right: 10px"
              ></el-input>
              <el-button type="primary" plain size="small" @click="selectCity">选择</el-button>-->
              <el-cascader class="select_width" :options="Cityoptions" v-model="ruleForm.selectArea2" clearable placeholder="请选择省/市/区"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="详细地址：">
              <el-input type="textarea" :rows="2" resize="none" show-word-limit :maxlength="50" v-model.trim="ruleForm.dz2" placeholder="填写用详细地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="法定联系人 ：" prop="fr2">
              <el-input v-model.trim="ruleForm.fr2" clearable placeholder="法定联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="机构简介：">
              <el-input type="textarea" :rows="2" resize="none" show-word-limit :maxlength="100" v-model.trim="ruleForm.jj2" placeholder="简介"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="经营范围：">
              <el-input type="textarea" :rows="3" resize="none" show-word-limit :maxlength="100" v-model.trim="ruleForm.jyfw2" placeholder="经营范围"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="备注：">
              <el-input type="textarea" :rows="2" resize="none" show-word-limit :maxlength="50" v-model.trim="ruleForm.bz2" placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="forms_fooer">
          <el-button class="btnSizeStyle" @click="offDrawer('ruleForm')">取 消</el-button>
          <el-button type="primary" class="btnSizeStyle" @click="submitForm('ruleForm', ruleForm.title2)" v-preventReClick>确 定</el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { pinT } from '@/utils/allUrl.js'
// import { linkageCity } from '@/utils/linkageCity.js'
// import jointSelection from '@/components/JointSelection/index.vue' // 四级联动组件
export default {
  props: ['ruleForm'],
  data: function () {
    return {
      rules: {
        jgmc2: [
          { required: true, message: '请输入机构名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' },
          { pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' },
        ],
        jglx2: [{ required: true, message: '请输入机构类型', trigger: 'change' }],
        // lxr2: [{ pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' }],
        lxr2: [{ pattern: /^[\u4E00-\u9FA5]+$/g, message: '请输入中文', trigger: 'blur' }],
        fr2: [{ pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' }],
        lxrdh2: [{ pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
      },
      optionsjglx: [], // 机构
      Cityoptions: [], // 城市
      // xianxidizhi: '',
      // JointSelection: {
      //   dialogWorkOrder: false
      // },
      showcity: false,
      diziValue: '',
      tiText1: '暂无数据',
    }
  },
  // components: { jointSelection },
  // watch: {
  //   ruleForm: {
  //     // 正确给 cData 赋值的 方法
  //     deep: true,
  //     handler: function(newVal, oldVal) {
  //       if (newVal) {
  //         if (newVal.city2 !== this.xianxidizhi) {
  //           this.xianxidizhi = newVal.city2
  //         }
  //       }
  //     }
  //   }
  // },
  created: function () {
    this.Cityoptions = JSON.parse(getUrl('district'))
    this.getjglx()
  },
  methods: {
    // async lazyLoadAdd(node, resolve) {
    //   const user = JSON.parse(getUrl('userconter'))
    //   if (node.level === 0) {
    //     return resolve(await linkageCity(user.id, node.level + 1))
    //   } else if (node.level === 1) {
    //     return resolve(await linkageCity(user.id, node.level + 1, node.value))
    //   } else if (node.level === 2) {
    //     return resolve(await linkageCity(user.id, node.level + 1, node.value))
    //   } else if (node.level === 3) {
    //     return resolve(await linkageCity(user.id, node.level + 1, node.value, node.label))
    //   }
    // },
    // handleChange() {
    //   this.$nextTick(() => {
    //     const vals = this.$refs.cascaderList.presentText
    //     if (vals) {
    //       // const vals2 = vals.split(' / ')
    //       // let cont = ''
    //       // vals2.forEach(item => {
    //       //   cont += item
    //       // })
    //       this.ruleForm.city2 = vals
    //     } else {
    //       this.ruleForm.city2 = this.diziValue
    //     }
    //   })
    // },
    offDrawer(ruleForm) {
      this.$emit('guanbi', {
        type: false,
      })
      this.$refs.ruleForm.resetFields()
      // this.xianxidizhi = ''
    },
    submitForm(ruleForm, title) {
      const { jgmc2, jglx2, lxr2, lxrdh2, selectArea2, dz2, fr2, jj2, jyfw2, bz2, id } = this.ruleForm
      if (selectArea2) {
        var city1 = selectArea2[0] // 省
        var city2 = selectArea2[1] // 市
        var city3 = selectArea2[2] // 区
        var city4 = selectArea2[3] // 街道
      }
      const params = new URLSearchParams()
      params.append('jgmc', jgmc2)
      params.append('JGLXS', jglx2)
      params.append('lxr', lxr2)
      params.append('lxrdh', lxrdh2)
      params.append('sf', city1 || '')
      params.append('cs', city2 || '')
      params.append('qx', city3 || '')
      params.append('xzjd', city4 || '')
      params.append('ssq_no', selectArea2[selectArea2.length - 1])
      params.append('dz', dz2)
      params.append('fr', fr2)
      params.append('jj', jj2)
      params.append('jyfw', jyfw2)
      params.append('bz', bz2)
      this.$refs[ruleForm].validate(async (valid) => {
        if (valid) {
          if (title === '添加机构') {
            const { data: res } = await this.$http.post(`${pinT}zzjg/create`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.$emit('guanbi', {
              type: false,
            })
            this.$refs.ruleForm.resetFields()
          } else {
            // this.optionsjglx.forEach(item => {
            //   if (item.label === jglx2 || item.value === jglx2) {
            //     this.jglx2 = item.value
            //   }
            // })
            const params2 = new URLSearchParams()
            if (typeof selectArea2 === 'number' || typeof selectArea2 === 'string') {
              if (selectArea2 === 0) {
                params2.append('sf', '')
                params2.append('cs', '')
                params2.append('qx', '')
              } else {
                const s = (selectArea2 + '').substr(0, 2) + '0000'
                const c = (selectArea2 + '').substr(0, 4) + '00'
                const x = (selectArea2 + '').substr(0, 6)
                params2.append('sf', s)
                params2.append('cs', c)
                params2.append('qx', x)
                params2.append('xzjd', selectArea2)
                params2.append('ssq_no', selectArea2)
              }
            } else {
              params2.append('sf', city1 || '')
              params2.append('cs', city2 || '')
              params2.append('qx', city3 || '')
              params2.append('xzjd', city4 || '')
              params2.append('ssq_no', selectArea2[selectArea2.length - 1])
            }
            params2.append('id', id)
            params2.append('jgmc', jgmc2)
            params2.append('JGLXS', jglx2)
            params2.append('lxr', lxr2)
            params2.append('lxrdh', lxrdh2)
            params2.append('dz', dz2)
            params2.append('fr', fr2)
            params2.append('jj', jj2)
            params2.append('jyfw', jyfw2)
            params2.append('bz', bz2)
            const { data: res } = await this.$http.post(`${pinT}zzjg/update`, params2)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.$emit('guanbi', {
              type: false,
            })
            this.$refs.ruleForm.resetFields()
          }
        } else {
          return this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
        }
      })
    },
    // 获取机构类型
    async getjglx() {
      const { data: res } = await this.$http.post(`${pinT}jglx/list`)
      if (res.code !== '0000') {
        this.optionsjglx = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.flmc,
          }
          this.optionsjglx.push(k)
        })
      }
    }
    // selectCity() {
    //   // this.JointSelection.dialogWorkOrder = true
    //   this.showcity = true
    //   this.$refs.cascaderList.toggleDropDownVisible()
    // },
    // visibleChange(val) {
    //   if (!val) {
    //     // if (this.ruleForm.xqbm === this.xqbmValue) {
    //     //   this.showcity = false
    //     // }
    //     this.showcity = false
    //   }
    // }
    // pingguanbi(val) {
    //   const { type, xqbmArr, cityVal } = val
    //   if (xqbmArr.length !== 0) {
    //     this.ruleForm.selectArea2 = xqbmArr
    //   }
    //   this.ruleForm.city2 = cityVal || this.ruleForm.city2
    //   // console.log(type, xqbm, xqbmArr, cityVal)
    //   this.JointSelection.dialogWorkOrder = type
    // }
  },
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .el-drawer {
    .addUer_title {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      height: 61px;
      line-height: 61px;
      border-bottom: 1px solid #ededed;
      box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8);
      > span {
        font-size: 18px;
        font-weight: 600;
      }
      .addUer_icon {
        font-size: 20px;
        font-weight: 700;
        display: flex;
        flex-flow: column;
        justify-content: center;
        cursor: pointer;
      }
    }
    .el-row {
      margin-top: 20px;
      .select_width {
        width: 50%;
      }
      .select_width2 {
        width: 60%;
      }
    }
    #phones_btn {
      margin-left: 10px;
      padding: 0;
      width: 98px;
      height: 34px;
    }
    .forms_fooer {
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding: 0 20px;
      box-sizing: border-box;
      align-items: center;
      height: 61px;
      line-height: 61px;
      border-top: 1px solid #ededed;
      background-color: #ffffff;
      .users_btn {
        padding: 0 10px;
        height: 36px;
      }
    }
  }
}
</style>
